<template>
  <el-dialog
    title="充值记录"
    :visible="value"
    width="900px"
    custom-class="dialog-box"
    @close="onClose"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-tabs v-model="activeName" @tab-click="changeTab">
      <el-tab-pane label="充值记录" name="1">
        <table class="table-box printOrder-data">
          <thead>
            <tr>
              <th>充值金额</th>
              <th>赠送金额</th>
              <th>充值时间</th>
              <th>账户余额</th>
              <th>备注</th>
              <th>操作人员</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in tableList" :key="index">
              <td>{{item.changeAmount}}</td>
              <td>{{item.giveAmount}}</td>
              <td>{{item.gmtCreate}}</td>
              <td>{{item.balance}}</td>
              <td>{{item.remark}}</td>
              <td>{{item.operatorName}}</td>
              <td>
                <el-link @click="printPay(item)">打印</el-link>
              </td>
            </tr>
            <tr v-if="tableList.length<1">
              <td colspan="8" style="text-align:center;">暂无数据</td>
            </tr>
          </tbody>
        </table>
        <br />
        <pager v-model="pager" @change-pagenum="getRrcordList"></pager>
      </el-tab-pane>
      <el-tab-pane label="退款记录" name="2">
        <table class="table-box printOrder-data">
          <thead>
            <tr>
              <th>退款金额</th>
              <th>退款时间</th>
              <th>账户余额</th>
              <th>备注</th>
              <th>操作人员</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in tableList" :key="index">
              <td>{{item.changeAmount}}</td>
              <td>{{item.gmtCreate}}</td>
              <td>{{item.balance}}</td>
              <td>{{item.remark}}</td>
              <td>{{item.operatorName}}</td>
              <td>
                <el-link @click="printPay(item)">打印</el-link>
              </td>
            </tr>
            <tr v-if="tableList.length<1">
              <td colspan="8" style="text-align:center;">暂无数据</td>
            </tr>
          </tbody>
        </table>
        <br />
        <pager v-model="pager" @change-pagenum="getRrcordList"></pager>
      </el-tab-pane>
    </el-tabs>
    <br />
    <el-row>
      <el-col :span="12" style="height:10px;"></el-col>
      <el-col :span="12">
        <el-button style="float:right;margin-right:10px;" @click="exportExcel()">导出</el-button>
      </el-col>
    </el-row>
    <iframe
      v-show="showRecharge"
      frameborder="0"
      height="0px"
      width="0px"
      ref="iframe"
      src="/print/note.html"
    ></iframe>
  </el-dialog>
</template>
<script>
import Excel from "@/_js/excel.js";
export default {
  props: ["value", "curItem",'vip'],
  data() {
    return {
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      tableList: [],
      activeName: "1",
      showRecharge: false,
      iframeContent: {}
    };
  },
  mounted() {
    this.getRrcordList();
  },
  methods: {
    getRrcordList() {
      let th = this;
      let j = { type: this.activeName, patientId: this.curItem.patientId };
      Object.assign(j, this.pager);
      th.$api.rechargeRecordList(j).then((res) => {
        if (res.executed) {
          th.tableList = res.dataBody.list;
          th.pager.total = res.dataBody.total;
        }else{
           th.tableList =[];
          th.pager.total =0;
        }
      });
    },
    onClose() {
      let th = this;
      th.$emit("input", false);
    },
    //打印
    printPay(obj) {
      let th = this;
      th.showRecharge = true;
      th.iframeContent = this.$refs.iframe.contentWindow;
      let list=[];
      list.push(obj);
      th.iframeContent.postMessage(
        {
          cmd: "postJson",
          params: JSON.stringify({
            detail: th.curItem,
            itemList:list,
            type: th.activeName,
            logo: th.adminUser.printLogo,
            hospitalName: th.adminUser.hospitalName,
            sfTotal:obj.changeAmount,
            balanceMoney:th.vip.account.amount,
            memberName:obj.operatorName,
            time:obj.gmtCreate.substring(0,10)
          }),
        },
        "*"
      );
    },
    exportExcel() {
      let th = this;
      let data = [];
      th.$api
        .rechargeRecordList({
          type: this.activeName,
          patientId: this.curItem.patientId,
          pageNum: 1,
          pageSize: 500,
        })
        .then((res) => {
          if (res.executed) {
            data = res.dataBody.list;
            let list = [];
            let title = this.activeName == 1 ? "充值记录" : "退款记录";
            list =
              this.activeName == 1
                ? [
                    { key: "changeAmount", name: "充值金额" },
                    { key: "giveAmount", name: "赠送金额" },
                    { key: "gmtCreate", name: "充值时间" },
                    { key: "balance", name: "账户余额" },
                    { key: "remark", name: "备注" },
                    { key: "operatorName", name: "操作人员" },
                  ]
                : [
                    { key: "changeAmount", name: "退款金额" },
                    { key: "gmtCreate", name: "退款时间" },
                    { key: "balance", name: "账户余额" },
                    { key: "remark", name: "备注" },
                    { key: "operatorName", name: "操作人员" },
                  ];
            Excel(data, list, title);
          }
        });
    },
    changeTab(obj) {
      this.pager.pageNum = 1;
      this.getRrcordList();
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
